<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册界面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <style>
        .box {
            width: 100%;
            height: 740px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .name {
            margin-top: 10px;
            text-align: center;
        }
        
    </style>
</head>
<body>
    <script src="./js/vue.js"></script>
    <div class="box">
        <div style="border: 2px solid; width: 340px; height: 325px;">
            <h4 style="text-align: center;margin: 10px 0px 20px 0px;">用户注册界面</h4>
            <div class="name">
               用户名：&nbsp<input type="text" placeholder="请输入用户名" v-model="UserName">
            </div>
            <div class="name">
                密&nbsp&nbsp码： &nbsp&nbsp<input type="password" placeholder="请输入密码" v-model="passwd">
             </div>
             <div style="margin: 8px 22px 0px 42px; ">
                性别：&nbsp&nbsp&nbsp&nbsp&nbsp<input type="radio" id="man" value="man" v-model="sex">
                <label for="man">男</label>
                <input type="radio" id="woman" value="woman" v-model="sex">
                <label for="woman">女</label>
             </div>
             <div style="margin: 0px 10px 0px 42px;">
                邮箱地址:&nbsp<input type="text" placeholder="XXXXXXX@qq.com" v-model="email">
             </div>
             <div style="margin: 7px 10px 0px 42px;">
                密码问题:&nbsp<select v-model="pass" style="width: 100;">
                    <option disabled value="">你最喜欢的颜色是？&nbsp</option>
                    <option>你最喜欢吃的水果是？&nbsp</option>
                    <option>你喜欢的社交平台是？&nbsp</option>
                </select>
             </div>
             <div style="margin: 7px 10px 0px 42px;">
                密码答案:&nbsp;<input type="text" v-model="passD">
             </div>
             <div>
                <button type="button" class="btn btn-primary" style="margin: 10px 20px 10px 42px;"  @click="success()">注册</button>
                <button type="button" class="btn btn-outline-secondary" @click="reset()">重填</button>
            </div>
        </div>
    </div>
    
    <script>
        let vm = new Vue({
             el: '.box',
             data:{
                UserName:'',
                passwd:'',
                sex:'',
                email:'',
                pass:'',
                passD:''
             },
             methods:{
                reset(){
                    this.UserName='',
                    this.passwd='',
                    this.sex='',
                    this.email="",
                    this.pass='',
                    this.passD=''
                },
                success(){
                    alert("注册成功!"),
                    this.UserName='',
                    this.passwd='',
                    this.sex='',
                    this.email="",
                    this.pass='',
                    this.passD=''
                }
             }
         })
    </script>
</body>
</html>